<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>修改信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background: linear-gradient(to bottom right, #f5f7fa, #c3cfe2) fixed;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(to right, #4CAF50, #6a9e8d);
            overflow: hidden;
            display: flex;
            justify-content: space-between;
        }

        .navbar .btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar .btn a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            cursor: pointer;
        }

        .navbar .btn a:hover {
            background-color: #575757;
        }

        .navbar .btn a img {
            margin-right: 5px;
            vertical-align: middle;
            height: 25px;
            width: 25px;
            margin-left: 5px;
        }

        .container{
            margin: 20px auto;
            padding: 20px;
            width: 80vh;
            background-color: #f2f2f2;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .container:hover {
            transform: translateY(-5px);
            transition: transform 0.3s ease;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }

        h2, h3 {
            margin-top: 0;
        }

        .title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
            font-weight: bold;
        }

        /*底部按钮样式*/
        .footer-btn-box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .footer-btn {
            width: 150px;
            height: 50px;
            text-align: center;
            font-size: 16px;
            margin-left: 5px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 10px;
            background-color: #4CAF50;
            color: #f2f2f2;
            cursor: pointer;
        }

        .footer-btn:hover {
            background-color: #575757;
            transform: scale(1.05);
            transition: background-color 0.3s ease;
        }

        input[type="text"] {
            width: 100%;
            height: 100%;
            border: none;
            box-sizing: border-box;
            background-color: #f2f2f2;
            text-align: center;
        }
        input[type="text"]:focus {
            outline: none;
        }

        /*修改删除按钮样式*/
        .delete-phone-btn {
            margin: 2px 0;
            width: 150px;
            padding: 10px;
            background-color: red;
            color: #f2f2f2;
            cursor: pointer;
            border: none;
            border-radius: 5px;
        }
        .delete-phone-btn:hover {
            background-color: #575757;
            transform: scale(1.05);
            transition: background-color 0.3s ease;
        }
        .change-phone-btn {
            margin: 2px 0;
            width: 150px;
            padding: 10px;
            background-color: #4CAF50;
            color: #f2f2f2;
            cursor: pointer;
            border: none;
            border-radius: 5px;
        }
        .change-phone-btn:hover {
            background-color: #575757;
            transform: scale(1.05);
            transition: background-color 0.3s ease;
        }
    </style>
</head>
<body>


<!-- 导航栏 -->
<div class="navbar">
    <div class="btn">
        <a href="${pageContext.request.contextPath}/index.jsp">
            <img src="${pageContext.request.contextPath}/static/LOGO.svg" alt="主页">欢迎${account.username}
        </a>
    </div>

    <div class="btn">
        <a href="${pageContext.request.contextPath}/logout" onclick="return confirm('确定要退出登录吗？')">退出登录</a>
    </div>
</div>

<%-- 信息 --%>
<div class="container">
    <div class="title">请修改后提交您的信息</div>
    <form name="update" action="${pageContext.request.contextPath}/update/tenant" method="post">
    <table>
        <tr>
            <th></th>
            <th>信息</th>
            <th>状态或操作</th>
        </tr>

        <tr>
            <td>ID</td>
            <td>${tenant.tenantId}</td>
            <td>不可修改</td>
        </tr>
        <tr>
            <td>用户名</td>
            <td>${account.username}</td>
            <td>不可修改</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td><input type="text" name="name" value="${tenant.name}" required></td>
            <td>可修改</td>
        </tr>
        <tr>
            <td>银行卡</td>
            <td><input type="text" name="bankAccount" value="${tenant.bankAccount}" required></td>
            <td>可修改</td>
        </tr>
        <tr>
            <td>紧急联系人</td>
            <td><input type="text" name="emergencyName" value="${tenant.emergencyName}" required></td>
            <td>可修改</td>
        </tr>
        <tr>
            <td>紧急联系人电话</td>
            <td><input type="text" name="emergencyPhone" value="${tenant.emergencyPhone}" required></td>
            <td>可修改</td>
        </tr>
        <c:if test="${not empty tenantPhones}">
            <c:forEach items="${tenantPhones}" var="phone" varStatus="status">
                <tr>
                    <td>电话${status.count}:</td>
                    <td>${phone}</td>
                    <td>
                        <button type="button" class="delete-phone-btn" onclick="window.location.href='${pageContext.request.contextPath}/update/tenant/phones?op=delete&tenantId=${tenant.tenantId}&phone=${phone}'">删除</button>
                        <button type="button" class="change-phone-btn">修改</button>
                    </td>
                </tr>
            </c:forEach>
        </c:if>
    </table>
    <div class="footer-btn-box">
        <button class="footer-btn" id="add-phone-btn" type="button">添加电话信息</button>
        <button class="footer-btn" type="submit">提交修改</button>
    </div>
    </form>
</div>

<script>
    document.querySelector("form[name='update']").onsubmit = function (e) {
        // 获取输入值
        const phone = document.querySelector("input[name='emergencyPhone']").value.trim();
        const bankAccount = document.querySelector("input[name='bankAccount']").value.trim();
        const name = document.querySelector("input[name='name']").value.trim();

        // 姓名验证：只能是纯中文 或 含空格的英文字母
        const chineseNameRegex = /^[\u4e00-\u9fa5]+$/; // 纯中文，无空格
        const englishNameRegex = /^[a-zA-Z\s]+$/;     // 英文或含空格的英文名

        if (!chineseNameRegex.test(name) && !englishNameRegex.test(name)) {
            alert("姓名必须为纯中文或英文（英文可带空格），不允许有其他字符！");
            e.preventDefault(); // 阻止表单提交
            return false;
        }

        // 手机号验证：11位数字，以1开头
        const phoneRegex = /^1\d{10}$/;
        if (!phoneRegex.test(phone)) {
            alert("请输入有效的手机号码！");
            e.preventDefault();
            return false;
        }

        // 银行卡号验证：16-19位数字
        const bankAccountRegex = /^\d{16,19}$/;
        if (!bankAccountRegex.test(bankAccount)) {
            alert("请输入有效的银行卡号！");
            e.preventDefault();
            return false;
        }

        // 所有验证通过
        return true;
    };

    document.querySelector("#add-phone-btn").addEventListener("click", function () {
        const tenantId = "${tenant.tenantId}"; // 获取当前租户ID
        const newPhone = prompt("请输入需要添加的电话号码：");

        if (newPhone === null) {
            alert("已取消添加电话");
            return;
        }

        const phoneRegex = /^1\d{10}$/; // 手机号正则表达式

        if (!phoneRegex.test(newPhone)) {
            alert("请输入有效的手机号码（11位数字，以1开头）！");
            return;
        }

        // 构建请求URL
        const url = "${pageContext.request.contextPath}/update/tenant/phones?op=add&tenantId=" + tenantId + "&phone=" + encodeURIComponent(newPhone);

        // 发起GET请求
        window.location.href = url;
    });

    document.querySelectorAll(".change-phone-btn").forEach(function (btn) {
        btn.addEventListener("click", function () {
            const phone = btn.parentNode.previousElementSibling.textContent;
            const newPhone = prompt("请输入新的电话号码：", phone);

            if (newPhone === null) {
                alert("已取消修改电话");
                return;
            }

            const phoneRegex = /^1\d{10}$/; // 手机号正则表达式

            if (!phoneRegex.test(newPhone)) {
                alert("请输入有效的手机号码（11位数字，以1开头）！");
            } else {
                // 构建请求URL
                // 发起GET请求
                window.location.href = "${pageContext.request.contextPath}/update/tenant/phones?op=update&tenantId=" + "${tenant.tenantId}" + "&phone=" + encodeURIComponent(phone) + "&newPhone=" + encodeURIComponent(newPhone);
            }
        })
    })


</script>

</body>
</html>
